<template>
    <div class="posts">
        <div class="posts-header">
            <div class="posts-header-title">
                文章
            </div>
            <div class="posts-sort">
                <span class="posts-type" @click="hot" :class="currentIndex==0?'heighlight':''">热门</span>
                <span class="posts-type" @click="newTime" :class="currentIndex==1?'heighlight':''">最新</span>
            </div>
        </div>
        <ul class="posts-list" v-if="articles.length!=0">
            <div>
                <li class="posts-item" v-for="(item,index) in articles" :key="index">
                    <div class="entry-box">
                        <div class="entry-link">
                            <div class="content-box">
                                <div class="posts-item-info">
                                    <div class="info-row meta">
                                        <ul class="meta-list">
                                            <li class="meta-item username">
                                                <div class="user-popover">
                                                    <router-link :to="{path:`/user/${$route.params.id}`}" class="touser">{{item.nick_name}}</router-link>
                                                </div>
                                            </li>
                                            <li class="meta-item time">
                                                1月前
                                            </li>
                                            <li class="meta-item tag">
                                                <router-link class="totag" :to="{path:`/user/${$route.params.id}/posts`}">GraphQL</router-link>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="info-row title">
                                        <span>
                                            <router-link class="title-item" :to="{path:`/article/${item.article_id}`}">
                                                {{item.title}}
                                            </router-link>
                                        </span>
                                    </div>
                                    <div class="info-row action">
                                        <ul class="action-list">
                                            <li class="action-item like">
                                                <a class="action-item-box">
                                                    <i class="iconfont icon-dianzan"></i>
                                                    <span class="action-count">1</span>
                                                </a>
                                            </li>
                                            <li class="action-item comment">
                                                <router-link :to="{path:`/article/${item.article_id}`}" class="action-item-box">
                                                    <i class="iconfont icon-pinglun2"></i>
                                                    <span class="action-count" v-if="item.comment_num!==0">1</span>
                                                </router-link>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </div>
        </ul>
        <div>
            这里什么都没有
        </div>
    </div>
</template>

<script>
    export default {
        name: "Posts",
        created(){
            this.getArticles()
        },
        mounted(){
            window.onscroll=this.myScroll
        },
        data(){
            return {
                articles:[],
                page:1,
                currentIndex:1
            }
        },
        methods:{
            async getArticles(){
                let result = await this.axios.post("api/articleList",{
                    user_id:this.$route.params.id,
                    page:this.page,//页码数
                    type:1//1为文章 2为沸点
                })
                if(this.page==1){
                    this.articles=result.data.data.data
                }else if(this.page>1){
                    this.articles = [...this.articles,...result.data.data.data]
                }
                // this.content = result.data.data.data
            },
            //热门
            async hot(){
                this.currentIndex=0
                let result = await this.axios.post("api/articleList",{
                    user_id:this.$route.params.id,
                    page:this.page,//页码数
                    type:1,//1为文章 2为沸点
                    sort:1
                })
                if(this.page==1){
                    this.articles=result.data.data.data
                }else if(this.page>1){
                    this.articles = [...this.articles,...result.data.data.data]
                }
            },
            //最新
            async newTime(){
                this.currentIndex=1
                let result = await this.axios.post("api/articleList",{
                    user_id:this.$route.params.id,
                    page:this.page,//页码数
                    type:1,//1为文章 2为沸点
                    sort:0
                })
                if(this.page==1){
                    this.articles=result.data.data.data
                }else if(this.page>1){
                    this.articles = [...this.articles,...result.data.data.data]
                }
            },
            myScroll(){
                let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                //变量windowHeight是可视区的高度
                let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
                //滚动条到底部的条件
                if(scrollTop+windowHeight==scrollHeight){
                    //写后台加载数据的函数
                    console.log("文章hhhhh");
                    this.page++
                    this.getArticles()
                }
            }
        }
    }
</script>

<style scoped>
    /*user-popover 气泡盒子*/
    .posts{
        background-color: #fff;
    }
    .posts .posts-header{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 28px;
        height: 50px;
        white-space: nowrap;
        border-bottom: 2px solid rgba(230,230,231,.5);
    }
    .posts-header .posts-header-title{
        font-size: 15px;
        font-weight: 600;
        color: #000;
    }
    .posts-header .posts-sort{
        margin-left:auto
    }
    .posts-sort .posts-type{
        position: relative;
        padding: 12px 0;
        font-size: 14px;
        color: #72777b;
    }
    .posts-type.heighlight{
        color:#000
    }
    .posts-sort .posts-type:hover{
        cursor:pointer
    }
    .posts-sort .posts-type:not(:last-child) {
        margin-right: 24px;
    }
    .posts-sort .posts-type:first-child::after{
        content:"";
        position:absolute;
        display:block;
        top: 50%;
        right: -12px;
        margin-top: -7px;
        width: 1px;
        height: 14px;
        background-color: #b2bac2;
        opacity: .5;
    }
    .posts .posts-list{
        background-color: #fff;
    }
    .posts-list .posts-item:not(:last-child) {
        border-bottom: 1px solid rgba(178,186,194,.15);
    }
    .entry-link{
        cursor:pointer
    }
    .entry-link .content-box{
        display: flex;
        align-items: center;
        padding: 18px 28px;
    }
    .posts-item-info{
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }
    .info-row.meta{
        font-size: 12px;
        color: #b2bac2;
    }
    .touser,.totag{
        color: #b2bac2;
    }
    .touser:hover,.totag:hover{
        color:#007fff;
    }

    .meta-list{
        display: flex;
    }
    .meta-item.username .user-popover{
        display: inline-block;
    }
    .meta-item.username::after,.meta-item.time::after{
        content:"·";
        margin: 0 5px;
        color: #b2bac2;
    }
    .info-row.title{
        margin: 6px 0 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .info-row.title .title-item{
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        color: #2e3135;
    }
    .info-row.title .title-item:hover {
        text-decoration: underline;
    }
    .action-list{
        display: flex;
    }
    .action-list .action-item{
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 24px;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        color: #b2bac2;
        border-radius: 1px;
        border: 1px solid #edeeef;
    }
    .action-item-box{
        display: flex;
        align-items: center;
        padding: 0 9px;
        height: 100%;
    }
    .action-count{
        color: #b2bac2;
        margin-left: 2.5px
    }
    /*点赞高亮*/
    .action-active{
        color:#6cbd45;
    }
    .action-block{
        width:10px;
        height:10px;
        background-color:#0086b3;
    }
    .entry-link:hover {
        background-color: rgba(0,0,0,.01);
    }
    .action-item:hover{
        background-color:#f7f8fa;
    }
</style>